<template>
  <div>
    <input type="text" v-model="myValue" @blur="vali">
    <span v-if="isShowVal" class="vali-error">不能为空</span>
  </div>
</template>

<script>
import { bus } from './form-bus'
export default {
  props: {
    value: String
  },
  data () {
    return {
      myValue: this.value,
      isShowVal: false
    }
  },
  mounted () {
    bus.$on('vali', () => {
      this.vali()
    })
  },
  watch: {
    myValue (n) {
      this.$emit('input', n)
      if (n === '') {
        this.isShowVal = true
      } else {
        this.isShowVal = false
      }
    }
  },
  methods: {
    vali () {
      if (this.myValue === '') {
        this.isShowVal = true
      }
    }
  }
}
</script>
